<template>
  <section class="category hidden-md-and-down">
    <div class="category-inner">
      <el-row v-if="popularUses.length>0">
        <el-col :span="2">
          <el-tag type="info" effect="plain">热门用途：</el-tag>
        </el-col>
        <el-col :span="22">
          <el-button
            type="info"
            size="small"
            plain
            v-for="(item,index) in popularUses"
            :key="index"
            @click="linkTo(item)"
          >{{item.name}}</el-button>
        </el-col>
      </el-row>
      <el-row v-if="popularStyle.length>0">
        <el-col :span="2">
          <el-tag type="info" effect="plain">热门风格：</el-tag>
        </el-col>
        <el-col :span="22">
          <el-button
            type="info"
            size="small"
            plain
            v-for="(item,index) in popularStyle"
            :key="index"
            @click="linkTo(item)"
          >{{item.name}}</el-button>
        </el-col>
      </el-row>
      <el-row v-if="featuredMaterial.length>0">
        <el-col :span="2">
          <el-tag type="info" effect="plain">精选素材：</el-tag>
        </el-col>
        <el-col :span="22">
          <el-button
            type="info"
            size="small"
            plain
            v-for="(item,index) in featuredMaterial"
            :key="index"
            @click="linkTo(item)"
          >{{item.name}}</el-button>
        </el-col>
      </el-row>
    </div>
  </section>
</template>


<script>
export default {
  name: "Category",
  data() {
    return {
      dataList: [],
      popularUses: [],
      popularStyle: [],
      featuredMaterial: []
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.$axios.get("/api/web/getRecommend").then(res => {
        this.dataList = res.data.rows;
        this.popularUses = this.differentData(
          this.dataList,
          1,
          "recommend_type"
        );
        this.popularStyle = this.differentData(
          this.dataList,
          2,
          "recommend_type"
        );
        this.featuredMaterial = this.differentData(
          this.dataList,
          3,
          "recommend_type"
        );
      });
    },

    differentData(arr, v, attributes) {
      var list = [];
      for (var obj of arr) {
        if (obj[attributes] === v) {
          list.push(obj);
        }
      }
      return list;
    },
    
    linkTo(obj) {
      var type = parseInt(obj.link_type);
      var key = "";
      if (type === 1) {
        key = "category_id";
      } else if (type === 2) {
        key = "tag_id";
      } else if (type === 3) {
        key = "topic_id";
      } else {
        window.open(obj.link, "_self");
        return;
      }
      this.$router.push({
        name: "list",
        path: "/list",
        query: {
          [key]: obj.link_id,
          title: obj.name
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.category {
  padding: 0 16px;
  margin-bottom: 24px;
  .category-inner {
    max-width: 1380px;
    margin: 0 auto;
    .el-row + .el-row {
      margin-top: 10px;
    }
    .el-tag--plain.el-tag--info {
      position: relative;
    }
    .el-tag {
      position: relative;
      &:after {
        position: absolute;
        content: "";
        right: -12px;
        border: 6px solid transparent;
        top: 50%;
        margin-top: -6px;
        border-left-color: #d3d4d6;
      }
    }
  }
}
</style>
